<template>
  <div class="box" >
    <!-- 标签栏滚动 -->
    <van-tabs @click="showImgList" v-model="active">
        <van-tab title="全部">
         <lazy-component>
            <div v-for="img in imglistshow" :key="img.id" @click="a(img.id)" class="imgBox">
              <img class="imgw"  v-lazy="img.img_url"  />
              <div class="content">
                <p>{{img.title}} </p>
                <p>{{img.zhaiyao}} </p>
              </div>
            </div>
        </lazy-component>
        </van-tab>
        <van-tab v-for="item in navlist" :title="item.title" :key="item.id" :name="item.id">
        <!-- 图片列表内容 -->
        <lazy-component>
            <div v-for="img in imglistshow" :key="img.id" @click="a(img.id)" class="imgBox">
              <img class="imgw"  v-lazy="img.img_url"  />
              <div class="content">
                <p>{{img.title}} </p>
                <p>{{img.zhaiyao}} </p>
              </div>
            </div>
        </lazy-component>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active:0,
      navlist: [],
      imglistshow: []
    };
  },
  created() {
    this.getImageList();
    this.showImgList()
  },
  methods: {
    // 获取图片导航分类数据
    async getImageList() {
      const { data: res } = await this.$axios.get("/api/getimgcategory");
      this.navlist = res.message;
    },
    // 获取图片列表数据
    async showImgList() {
      const { data: res } = await this.$axios.get(`/api/getimages/${this.active}`);
      this.imglistshow = res.message;
    },
    // 点击图片跳转路由
    a(id){
      // console.log(id);
    this.$router.push({path: `/photo/Info/${id}`})
    // this.$axios.get(` /api/getimageInfo/:imgid`)
    }
  }
};
</script>

<style scope="less">
.imgBox{
  position: relative;

}
 .imgBox .content{
  width: 100%;
  height: 75px;
  position: absolute;
  padding: 0 10px;
  left: 0;
  bottom: 10px;
  border-radius:0 0 5px 5px;
  background: rgba(0,0,0,.4);
}
 .imgBox .content p{
   margin: 5px 0;
   font-size: 12px;
   color: #fff;
   text-align: left;
 }
.van-tab__pane {
  height: 100%;
  text-align: center;
  margin-top: 10px;
  
}
.van-tabs__content {
  display: block;
  margin: 0 10px;
}
.imgw {
  border-radius: 5px;
  height: 100% ;
  width: 100%;
  margin-bottom: 10px;
}
.lazy-component {
  position: relative;
}
.titlew {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: 300px;
  background-color: rgba(0, 0,0,.6)
}
</style>